<template>
    <div class="search-form isheader" v-if="headerShow">
        <div>
            <a-form size="small" :model="searchData" layout="inline">
                <a-form-item label="客户名称">
                    <a-input class="aInput" allow-clear v-model="searchData.clientName" />
                </a-form-item>
                <a-form-item label="开单日期">
                    <a-range-picker  popup-container="html"  class="aInput" allow-clear @change="changTime" />
                </a-form-item>
                <a-form-item label="退库单号">
                    <a-input class="aInput" allow-clear v-model="searchData.retreatLibraryNum" />
                </a-form-item>
                <a-form-item label="退库类型">
                    <a-input class="aInput" allow-clear v-model="searchData.retreatLibraryType" />
                </a-form-item>
                <a-form-item label="布号">
                    <a-input class="aInput" allow-clear v-model="searchData.clothNum" />
                </a-form-item>
                <a-form-item label="品名">
                    <a-input class="aInput" allow-clear v-model="searchData.productName" />
                </a-form-item>
            </a-form>
        </div>
        <div style="text-align: end;">
            <Toolbar :items="['查询', '新增', '删除', '导出']" @select="selectHandler" @add="addHandler" v-if="handlerState === 1"
                @export="exportHandler" @del="delHandler" />
            <Toolbar :items="['查询', '导出']" @select="selectHandler" v-else @export="exportHandler" />
        </div>
    </div>
    <div class="my-divisders">
        <a-divider orientation="center">
            <icon-double-up v-if="headerShow" @click="changHeadShow(false)" :strokeWidth="2" :size="18" />
            <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18" />
        </a-divider>
    </div>
    <div class="gang"></div>
    <div :style="{ height: '74vh', padding: '10px' }">
        <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady" style="height:90%"
            class='ag-theme-alpine' :defaultColDef="defaultColDef" :rowData="table.dataList" :columnDefs="cfsValue"
            :localeText="localeTextData" />
        <paginationCopys :total="total" show-total show-jumper show-page-size @change="changePage"
            @page-size-change="changeSize" style="justify-content: center;margin-top: 10px;"
            :page-size="pagination.pageSize" :current="pagination.page" />
    </div>
    <a-drawer :drawer-style="{ zIndex: 9999 }" height="100%" unmountOnClose :visible="pageData.showAdd"
        :mask-closable="false" placement="bottom" @cancel="pageData.showAdd = false">
        <template #title>
            {{ pageData.sideTitle }}
        </template>
        <a-form ref="formRef" style="margin-top:20px" layout="horizontal" auto-label-width :model="dataForm">
            <a-row :gutter="20">
                <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                    <a-form-item label="退库单号" field="retreatLibraryNum" :rules="[{ message: '退库单号必填' }]"
                        :validate-trigger="['change', 'blur']">
                        <a-input v-model="dataForm.retreatLibraryNum" allow-clear class="aInput" />
                    </a-form-item>
                </a-col>
                <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                    <a-form-item label="仓库名称" field="warehouseName" :rules="[{ message: '仓库名称必填' }]"
                        :validate-trigger="['change', 'blur']">
                        <a-input v-model="dataForm.warehouseName" allow-clear class="aInput" />
                        <!-- <a-select popup-container="html"  style="width: 270px;" v-model="dataForm.warehouseName"> 
                                <a-option />
                            </a-select> -->
                    </a-form-item>
                </a-col>
                <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                    <a-form-item label="退货类型" field="retreatLibraryType" :rules="[{ message: '退货类型必填' }]"
                        :validate-trigger="['change', 'blur']">
                        <a-input v-model="dataForm.retreatLibraryType" allow-clear class="aInput" />
                        <!-- <a-select popup-container="html"  style="width: 270px;" v-model="dataForm.retreatLibraryType">
                                <a-option />
                            </a-select> -->
                    </a-form-item>
                </a-col>
                <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                    <a-form-item label="订单号" field="orderNo" :rules="[{ message: '订单号必填' }]"
                        :validate-trigger="['change', 'blur']">
                        <a-input allow-clear class="aInput" v-model="dataForm.orderNo" />
                    </a-form-item>
                </a-col>
                <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                    <a-form-item label="客户名称" field="clientName" :rules="[{ message: '客户名称必填' }]"
                        :validate-trigger="['change', 'blur']">
                        <a-input allow-clear class="aInput" v-model="dataForm.clientName" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="20">
                <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                    <a-form-item label="开单日期" field="billingTime" :rules="[{ message: '开单日期必填' }]"
                        :validate-trigger="['change', 'blur']">
                        <a-date-picker  popup-container="html"  v-model="dataForm.billingTime" allow-clear style="width: 270px;" />
                    </a-form-item>
                </a-col>
                <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                    <a-form-item label="客户订单号" field="clientOrder" :rules="[{ message: '客户订单号必填' }]"
                        :validate-trigger="['change', 'blur']">
                        <a-input allow-clear class="aInput" v-model="dataForm.clientOrder" />
                    </a-form-item>
                </a-col>
                <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                    <a-form-item label="流转卡号" field="circulationCard" :rules="[{ message: '流转卡号必填' }]"
                        :validate-trigger="['change', 'blur']">
                        <a-input allow-clear class="aInput" v-model="dataForm.circulationCard" />
                    </a-form-item>
                </a-col>
                <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                    <a-form-item label="计件日期" field="pieceTime" :rules="[{ message: '计件日期必填' }]"
                        :validate-trigger="['change', 'blur']">
                        <a-date-picker  popup-container="html"  allow-clear class="aInput" v-model="dataForm.pieceTime" />
                    </a-form-item>
                </a-col>
                <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                    <a-form-item label="班组" field="team" :rules="[{ message: '班组必填' }]"
                        :validate-trigger="['change', 'blur']">
                        <a-input allow-clear class="aInput" v-model="dataForm.team" />
                        <!-- <a-select popup-container="html"  style="width: 270px;" v-model="dataForm.team">
                                <a-option />
                            </a-select> -->
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="20">
                <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                    <a-form-item label="收费项" field="chargeItem" :rules="[{ message: '收费项必填' }]"
                        :validate-trigger="['change', 'blur']">
                        <a-input allow-clear class="aInput" v-model="dataForm.chargeItem" />
                    </a-form-item>
                </a-col>
                <a-col :xxl="16" :xl="16" :lg="24" :md="24" :xs="24">
                    <a-form-item label="单价生成明细情况" field="priceDetailed" :rules="[{ message: '单价生成明细情况必填' }]"
                        :validate-trigger="['change', 'blur']">
                        <a-input allow-clear class="aInputLine" v-model="dataForm.priceDetailed" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="20">
                <a-col :xxl="20" :xl="20" :lg="24" :md="24" :xs="24">
                    <a-form-item label="备注">
                        <a-input allow-clear class="aInputLine" v-model="dataForm.remark" />
                    </a-form-item>
                </a-col>
            </a-row>
            <div class="fbg">
                <a-row :gutter="20">
                    <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                        <a-form-item label="费用类型" field="costType" :rules="[{ message: '费用类型必填' }]"
                            :validate-trigger="['change', 'blur']">
                            <a-input allow-clear class="aInput" v-model="dataForm.costType" />
                            <!-- <a-select popup-container="html"  style="width: 270px;" v-model="dataForm.costType">
                                    <a-option />
                                </a-select> -->
                        </a-form-item>
                    </a-col>
                    <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                        <a-form-item label="染色单价" field="dyePrice" :rules="[{ message: '染色单价必填' }]"
                            :validate-trigger="['change', 'blur']">
                            <a-input-number :min="0" :step="0.1" :precision="2" allow-clear class="aInput"
                                v-model="dataForm.dyePrice" />
                        </a-form-item>
                    </a-col>
                    <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                        <a-form-item label="耐氯提升单价" field="tsprice" :rules="[{ message: '耐氯提升单价必填' }]"
                            :validate-trigger="['change', 'blur']">
                            <a-input-number :min="0" :step="0.1" :precision="2" allow-clear class="aInput"
                                v-model="dataForm.tsprice" />
                        </a-form-item>
                    </a-col>
                    <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                        <a-form-item label="整理单价" field="sortPrice" :rules="[{ message: '整理单价必填' }]"
                            :validate-trigger="['change', 'blur']">
                            <a-input-number :min="0" :step="0.1" :precision="2" allow-clear class="aInput"
                                v-model="dataForm.sortPrice" />
                        </a-form-item>
                    </a-col>
                    <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                        <a-form-item label="胶袋单价" field="tapePrice" :rules="[{ message: '胶袋单价必填' }]"
                            :validate-trigger="['change', 'blur']">
                            <a-input-number :min="0" :step="0.1" :precision="2" allow-clear class="aInput"
                                v-model="dataForm.tapePrice" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="20">
                    <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                        <a-form-item label="抗黄单价" field="yellowPrice" :rules="[{ message: '抗黄单价必填' }]"
                            :validate-trigger="['change', 'blur']">
                            <a-input-number :min="0" :step="0.1" :precision="2" allow-clear class="aInput"
                                v-model="dataForm.yellowPrice" />
                        </a-form-item>
                    </a-col>
                    <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                        <a-form-item label="纸管单价" field="paperPrice" :rules="[{ message: '纸管单价必填' }]"
                            :validate-trigger="['change', 'blur']">
                            <a-input allow-clear class="aInput" v-model="dataForm.paperPrice" />
                        </a-form-item>
                    </a-col>
                    <a-col :xxl="12" :xl="12" :lg="24" :md="24" :xs="24">
                        <a-form-item label="单价构成">
                            <a-input-number :min="0" :step="0.1" :precision="2" allow-clear class="aInput"
                                v-model="dataForm.priceForm" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="20">
                    <a-checkbox :value="1"> 进缸 </a-checkbox>
                    <a-checkbox :value="1"> 收染费 </a-checkbox>
                    <a-checkbox :value="1"> 拨印 </a-checkbox>
                    <a-checkbox :value="1"> RC处理 </a-checkbox>
                    <a-checkbox :value="1"> 打包 </a-checkbox>
                    <a-checkbox :value="1"> 一等品 </a-checkbox>
                    <a-checkbox :value="1"> 湿刷 </a-checkbox>
                    <a-checkbox :value="1"> 防粘处理 </a-checkbox>
                </a-row>
            </div>
        </a-form>
        <a-tabs   :lazy-load="true" default-active-key="0">
            <!-- <a-button>新增</a-button> -->
            <!-- <a-button type="primary" 
                            @click="dataForm.retreatLibraryDetailedList.push({ ...detailItem })">新增</a-button> -->
            <template #extra>
                <el-button type="success" :icon="iconText.CirclePlus"
                    @click="dataForm.retreatLibraryDetailedList.push({ ...detailItem })"
                    style="margin-bottom: 10px;background:#67c23a ;">新增</el-button>
            </template>
            <a-tab-pane key="0" title="退库明细">
                <a-table size="small" :columns="createColumns" :data="dataForm.retreatLibraryDetailedList"
                    :pagination="false">
                    <template #clientName="{ rowIndex }">
                        <a-input type="text" class="aInput"
                            v-model="dataForm.retreatLibraryDetailedList[rowIndex].clientName" />
                    </template>
                    <template #stuffCodes="{ rowIndex }">
                        <a-input type="text" class="aInput"
                            v-model="dataForm.retreatLibraryDetailedList[rowIndex].stuffCodes" />
                    </template>
                    <template #deliveryUnit="{ rowIndex }">
                        <a-input type="text" class="aInput"
                            v-model="dataForm.retreatLibraryDetailedList[rowIndex].deliveryUnit" />
                    </template>
                    <template #barCode="{ rowIndex }">
                        <a-input type="text" class="aInput"
                            v-model="dataForm.retreatLibraryDetailedList[rowIndex].barCode" />
                    </template>
                    <template #makeNum="{ rowIndex }">
                        <a-input type="text" class="aInput"
                            v-model="dataForm.retreatLibraryDetailedList[rowIndex].makeNum" />
                    </template>
                    <template #clothNum="{ rowIndex }">
                        <a-input type="text" class="aInput"
                            v-model="dataForm.retreatLibraryDetailedList[rowIndex].clothNum" />
                    </template>
                    <template #productName="{ rowIndex }">
                        <a-input type="text" class="aInput"
                            v-model="dataForm.retreatLibraryDetailedList[rowIndex].productName" />
                    </template>
                    <template #colorScale="{ rowIndex }">
                        <a-input type="text" class="aInput"
                            v-model="dataForm.retreatLibraryDetailedList[rowIndex].colorScale" />
                    </template>
                    <template #planNo="{ rowIndex }">
                        <a-input type="text" class="aInput"
                            v-model="dataForm.retreatLibraryDetailedList[rowIndex].planNo" />
                    </template>
                    <template #yarnCount="{ rowIndex }">
                        <a-input type="text" class="aInput"
                            v-model="dataForm.retreatLibraryDetailedList[rowIndex].yarnCount" />
                    </template>
                    <template #doorWidth="{ rowIndex }">
                        <a-input type="text" class="aInput"
                            v-model="dataForm.retreatLibraryDetailedList[rowIndex].doorWidth" />
                    </template>
                    <template #gramWeight="{ rowIndex }">
                        <a-input-number :min="0" type="text" class="aInput"
                            v-model="dataForm.retreatLibraryDetailedList[rowIndex].gramWeight" />
                    </template>
                    <template #size="{ rowIndex }">
                        <a-input type="text" class="aInput" v-model="dataForm.retreatLibraryDetailedList[rowIndex].size" />
                    </template>
                    <template #horsesNum="{ rowIndex }">
                        <a-input-number :min="0" class="aInput"
                            v-model="dataForm.retreatLibraryDetailedList[rowIndex].horsesNum" />
                    </template>
                    <template #yarnbatch="{ rowIndex }">
                        <a-input type="text" class="aInput"
                            v-model="dataForm.retreatLibraryDetailedList[rowIndex].yarnbatch" />
                    </template>
                    <template #unitPrice="{ rowIndex }">
                        <a-input-number :min="0" :precision="2" class="aInput"
                            v-model="dataForm.retreatLibraryDetailedList[rowIndex].unitPrice" />
                    </template>
                    <template #amount="{ rowIndex }">
                        <a-input-number :min="0" :precision="2" class="aInput"
                            v-model="dataForm.retreatLibraryDetailedList[rowIndex].amount" />
                    </template>
                    <template #initialLocation="{ rowIndex }">
                        <a-input type="text" class="aInput"
                            v-model="dataForm.retreatLibraryDetailedList[rowIndex].initialLocation" />
                    </template>
                    <template #initiaTrayCodes="{ rowIndex }">
                        <a-input type="text" class="aInput"
                            v-model="dataForm.retreatLibraryDetailedList[rowIndex].initiaTrayCodes" />
                    </template>
                    <template #newLocation="{ rowIndex }">
                        <a-input type="text" class="aInput"
                            v-model="dataForm.retreatLibraryDetailedList[rowIndex].newLocation" />
                    </template>
                    <template #newTrayCodes="{ rowIndex }">
                        <a-input type="text" class="aInput"
                            v-model="dataForm.retreatLibraryDetailedList[rowIndex].newTrayCodes" />
                    </template>
                    <template #weight="{ rowIndex }">
                        <a-input type="text" class="aInput"
                            v-model="dataForm.retreatLibraryDetailedList[rowIndex].weight" />
                    </template>
                    <template #action="{ rowIndex }" v-if="dataForm.retreatLibraryDetailedList.length > 1">
                        <el-button type="danger" @click="dataForm.retreatLibraryDetailedList.splice(rowIndex, 1)"
                            link>删除</el-button>
                    </template>
                </a-table>
            </a-tab-pane>
        </a-tabs>
        <template #footer>
            <a-button size="mini" @click="pageData.showAdd = false">
                关闭
            </a-button>
            <a-button type="primary" size="mini" @click="saveHandler">
                保存
            </a-button>
        </template>
    </a-drawer>
</template>

<script setup lang="ts">
// import PageTabelLayout from '@/components/pageTabelLayout.vue';
import { reactive, ref, onMounted } from 'vue'
import emitter from "@/hooks/useEventBus";
import { useTableColumn } from '@/hooks/table'
import { WorkStocks, WSearchData } from '@/interface/workStocksInterface';

import { localeText } from '@/api/aggridZw'
import { assTable } from '@/utils/assemblyLevelTable';
import { FormInstance, Message, Modal } from '@arco-design/web-vue';
import { usePagination, useTable } from '@/hooks/table';
import { workShopStocks } from '@/api/DyeingshopManagement/workshopCancelStocks'
import { CirclePlus } from '@element-plus/icons-vue';
import dayjs from 'dayjs';
// export default {
// name: "workshopCancelStocks",
// components: { PageTabelLayout,  },
// setup() {
const workShopStocksApi = workShopStocks();
let headerShow = ref<boolean>(true);
let changHeadShow = (boolVal: boolean) => {
    headerShow.value = boolVal;
    emitter.emit('window-change');
};
onMounted(() => {
    pagination.page = 1;
    doRefresh();
});
let handlerState = ref<number>(1);
const selectHandler = () => {
    doRefresh();
};
const addHandler = () => {
    pageData.showAdd = true;
    pageData.sideTitle = '新增';
};
const formRef = ref<FormInstance>();
const saveHandler = () => {
    formRef.value?.validate().then(async (err) => {
        if (!err) {
            // console.log(dataForm)
            if (dataForm.id) {
                await workShopStocksApi
                    .editStocks({ ...dataForm })
                    .then((res: any) => {
                        if (res.code === 200) {
                            formRef.value?.resetFields();
                            pageData.showAdd = false;
                            Message.success({
                                content: "修改成功",
                                duration: 5000,
                            });
                            doRefresh();

                        }
                        else {
                            Message.error({
                                content: res.message,
                                duration: 2000
                            });
                        }
                    })
                    .catch((res) => {
                        console.log(res);
                    });
            }
            else {
                await workShopStocksApi
                    .addStocks({ ...dataForm })
                    .then((res: any) => {
                        if (res.code === 200) {
                            formRef.value?.resetFields();
                            pageData.showAdd = false;
                            Message.success({
                                content: "新增成功",
                                duration: 5000,
                            });
                            doRefresh();
                        } else {
                            Message.error({
                                content: res.message,
                                duration: 2000
                            });
                        }
                    })
                    .catch((res) => {
                        console.log(res);
                    });
            }
        }
        else {
            console.log(err);
        }
    });
};
let detailItem = {
    horsesNum: 0,
    clientName: '',
    stuffCodes: '',
    deliveryUnit: '',
    makeNum: '',
    clothNum: '',
    productName: '',
    colorScale: '',
    planNo: '',
    yarnCount: '',
    doorWidth: '',
    gramWeight: 0,
    yarnbatch: '',
    unitPrice: 0,
    amount: 0,
    barCode: '',
    initialLocation: '',
    initiaTrayCodes: '',
    newLocation: '',
    newTrayCodes: '',
    weight: '',
    size: ''
};
const dataForm = reactive<WorkStocks>({
    id: null,
    warehouseCode: '',
    warehouseName: '',
    retreatLibraryType: '',
    remark: '',
    costType: '',
    retreatLibraryNum: '',
    billingTime: dayjs(Date.now()).format('YYYY-MM-DD'),
    clientOrder: '',
    dyePrice: 0,
    circulationCard: '',
    orderNo: '',
    priceDetailed: '',
    pieceTime: dayjs(Date.now()).format('YYYY-MM-DD'),
    tsprice: 0,
    clientName: '',
    team: '',
    sortPrice: 0,
    chargeItem: '',
    priceForm: 0,
    tapePrice: 0,
    yellowPrice: 0,
    paperPrice: '',
    dutyDep: '',
    retreatLibraryDetailedList: [{ ...detailItem }]
});

const searchData = reactive<WSearchData>({
    billingTime: '',
    billingTime2: '',
    retreatLibraryNum: '',
    retreatLibraryType: '',
    clientName: '',
    clothNum: '',
    productName: ''
});
const changTime = (date: any) => {
    console.log(date);
}
const exportHandler = () => {
    // if (handlerState.value === 1) {
    //     emitter.emit('export-untreated');
    // } else {
    //     emitter.emit('export-processed');
    // }
    let selectList = gridOption.value.getSelectedRows();
    // console.log(selectList);
    if (selectList.length === 0) {
        Message.error('请勾选需要导出的数据')
        return
    } else {
        //导出数据
        let nowRow = table.dataList.filter(function (o) {
            return (gridOption.value.getSelectedRows().map((o: any) => { return o.id })).indexOf(o["id"]) !== -1;
        })
        assTable(cfsValue, nowRow, '车间退库信息');
    }
};
const changHandler = (e: number | string) => {
    handlerState.value = +e;
    selectHandler();
};
const pageData = reactive<({
    showAdd: boolean,
    pageLoading: boolean,
    sideTitle: string,
})>({
    showAdd: false,
    sideTitle: "新增",
    pageLoading: false
});
const createColumns = useTableColumn([
    {
        title: "客户名称",
        key: "clientName",
        dataIndex: "clientName",
        slotName: "clientName",
        width: 150,
    },
    {
        title: "收料单号",
        key: "stuffCodes",
        dataIndex: "stuffCodes",
        slotName: "stuffCodes",
        width: 150,
    },
    {
        title: "送货单位",
        key: "deliveryUnit",
        dataIndex: "deliveryUnit",
        slotName: "deliveryUnit",
        width: 150,
    },
    {
        title: "条形码",
        key: "barCode",
        dataIndex: "barCode",
        slotName: "barCode",
        width: 150,
    },
    {
        title: "织造序号",
        key: "makeNum",
        dataIndex: "makeNum",
        slotName: "makeNum",
        width: 160,
    },
    {
        title: "布号",
        key: "clothNum",
        dataIndex: "clothNum",
        slotName: "clothNum",
        width: 160,
    },
    {
        title: "品名",
        key: "productName",
        dataIndex: "productName",
        slotName: "productName",
        width: 150,
    },
    {
        title: "色称",
        key: "colorScale",
        dataIndex: "colorScale",
        slotName: "colorScale",
        width: 150,
    },

    {
        title: "计划单号",
        key: "planNo",
        dataIndex: "planNo",
        slotName: "planNo",
        width: 150,
    },
    {
        title: "纱支",
        key: "yarnCount",
        dataIndex: "yarnCount",
        slotName: "yarnCount",
        width: 150,
    },
    {
        title: "门幅",
        key: "doorWidth",
        dataIndex: "doorWidth",
        slotName: "doorWidth",
        width: 150,
    },
    {
        title: "克重",
        key: "gramWeight",
        dataIndex: "gramWeight",
        slotName: "gramWeight",
        width: 150,
    },
    {
        title: "尺寸",
        key: "size",
        dataIndex: "size",
        slotName: "size",
        width: 150,
    },
    {
        title: "匹数",
        key: "horsesNum",
        dataIndex: "horsesNum",
        slotName: "horsesNum",
        width: 150,
    },
    {
        title: "纱批",
        key: "yarnbatch",
        dataIndex: "yarnbatch",
        slotName: "yarnbatch",
        width: 150,
    },
    {
        title: "单价",
        key: "unitPrice",
        dataIndex: "unitPrice",
        slotName: "unitPrice",
        width: 150,
    },
    {
        title: "金额",
        key: "amount",
        dataIndex: "amount",
        slotName: "amount",
        width: 150,
    },
    {
        title: "原储位",
        key: "initialLocation",
        dataIndex: "initialLocation",
        slotName: "initialLocation",
        width: 150,
    },
    {
        title: "原布笼编号",
        key: "initiaTrayCodes",
        dataIndex: "initiaTrayCodes",
        slotName: "initiaTrayCodes",
        width: 150,
    },
    {
        title: "新储位",
        key: "newLocation",
        dataIndex: "newLocation",
        slotName: "newLocation",
        width: 150,
    },
    {
        title: "新布笼编号",
        key: "newTrayCodes",
        dataIndex: "newTrayCodes",
        slotName: "newTrayCodes",
        width: 150,
    },
    {
        title: "验后重量",
        key: "weight",
        dataIndex: "weight",
        slotName: "weight",
        width: 150,
    },
    {
        title: "操作",
        key: "action",
        dataIndex: "action",
        slotName: "action",
        width: 150,
        fixed: "right",
    },
]);

const table = useTable();
const doRefresh = async () => {
    // workShopStocksApi
    pageData.pageLoading = true;
    await workShopStocksApi.getStocksList({
        page: pagination.page,
        size: pagination.pageSize,
    }, { deleteState: 0, ...searchData }).then(({ data, code }) => {
        console.log(data.records);
        if (code === 200) {
            // gridOption.value.sizeColumnsToFit();
            table.handleSuccess(data.data.records);
            gridOption.value.setRowData(data.data.records);
            total.value = data.data.total;
        }
    }).catch(console.log)
        .finally(() => {
            pageData.pageLoading = false;
        });
};
const editHandler = async (data: any) => {
    await workShopStocksApi.getStocksItem({ id: data.id }).then((res: any) => {
        // console.log(res);
        if (res.code === 200) {
            let resData = res.data.list;
            for (let key in resData) {
                dataForm[key] = resData[key];
            };
            pageData.showAdd = true;
            pageData.sideTitle = '编辑';
        } else {
            Message.error(res.message);
        }
    })
};

const delHandler = () => {
    let vals = gridOption.value.getSelectedRows().map((v: any) => { return v.id });
    if (vals.length > 0) {
        Modal.confirm({
            title: "提示",
            content: "确定要批量删除选中数据吗？",
            cancelText: "取消",
            okText: "删除",
            onOk: async () => {
                const promises = vals.map((id: any) => {
                    return workShopStocksApi.delStocks(id);
                });
                Promise.all(promises).then((res: any) => {
                    let resStatus = res.every((v: any) => v.code === 200)
                    if (resStatus) {
                        Message.success("数据删除成功");
                        pagination.page = 1;
                        doRefresh();
                    }
                    else {
                        Message.error("数据删除失败");
                    }
                }).catch(error => {
                    console.log(error)
                });
            },
        });
    } else {
        Message.info("请选择需要删除的数据");
    }
};

const setDelHandler = (id: any) => {
    Modal.confirm({
        title: "提示",
        content: "确定要删除选中数据吗？",
        cancelText: "取消",
        okText: "删除",
        onOk: async () => {
            await workShopStocksApi.delStocks(id).then((res) => {
                if (res.code === 200) {
                    Message.success("数据删除成功");
                    pagination.page = 1;
                    doRefresh();
                } else {
                    Message.error("数据删除失败");
                }
            });
        },
    });
};



const pagination = usePagination(doRefresh);
//表格方面
const gridOption = ref();
const gridReady = (params: any) => {
    gridOption.value = params.api;
    //调整表格自适应大小
}
const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
    width: 150
};
let cfsValue: any = [
    {
        headerName: '仓库名称',
        field: 'warehouseName',
    },
    {
        headerName: "退库类型",
        field: "retreatLibraryType",
    },
    {
        headerName: "费用类型",
        field: "costType",
    },
    {
        headerName: "开单时间",
        field: "billingTime",
    },
    {
        headerName: "退库单号",
        field: "retreatLibraryNum",
    },
    {
        headerName: "流转卡号",
        field: "circulationCard",
    },
    {
        headerName: "客户名称",
        field: "clientName",
    },
    {
        headerName: "收料单号",
        field: "stuffCodes",
    },
    {
        headerName: "织造序号",
        field: "makeNum",
    },
    {
        headerName: "布号",
        field: "clothNum",
    },
    {
        headerName: "品名",
        field: "productName",
    },
    {
        headerName: "匹数",
        field: "horsesNum",
    },
    {
        headerName: "色称",
        field: "colorScale",
    },
    {
        headerName: "计划单号",
        field: "planNo",
    },
    {
        headerName: "纱支",
        field: "yarnCount",
    },

    {
        headerName: "门幅",
        field: "doorWidth",
    },
    {
        headerName: "克重",
        field: "gramWeight",
    },
    {
        headerName: "纱批",
        field: "yarnbatch",
    },
    {
        headerName: "单价",
        field: "unitPrice",
    },

    {
        headerName: "原库位",
        field: "initialLocation",
    },
    {
        headerName: "原托盘编码",
        field: "initiaTrayCodes",
    },
    {
        headerName: "新托盘编码",
        field: "newTrayCodes",
    },
    {
        headerName: "验后重量",
        field: "weight",
    },
    {
        headerName: "尺寸",
        field: "size",
    },
    {
        headerName: '操作',
        pinned: 'right',
        sortable: false,
        resizable: false,
        filter: false,
        width: 150,
        lockPosition: "right",
        cellRenderer: {
            template: `
                       <a-row align="center" justify="space-between"> 
                        <a-col :span="12">
                            <el-button style="color:#165dff;" link @click="a">修 改</el-button>
                        </a-col>
                        <a-col :span="12">
                            <el-button type="danger" link @click="b">删除</el-button>
                         </a-col>
                      </a-row> 
                    `,
            setup(props: any) {
                const a = () => {
                    editHandler(props.params.data);
                };
                const b = () => {
                    setDelHandler(props.params.data.id);
                }
                return {
                    a,
                    b
                }
            }
        }
    },
];
let a = [{
    showRowGroup: 'hide_def',
    "headerName": "",
    "checkboxSelection": true,
    "headerCheckboxSelection": true,
    "pinned": "left",
    "width": 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    lockPosition: "left",
}]
cfsValue = a.concat(cfsValue);
const total = ref(10);
const changePage = (val: any) => {
    pagination.page = val
    doRefresh();
}
const changeSize = (val: any) => {
    pagination.pageSize = val
    doRefresh();
};
const localeTextData: any = ref(localeText);
let iconText: any = {
    CirclePlus
}
        // return {
        //     headerShow,
        //     selectHandler,
        //     changHeadShow,
        //     addHandler,
        //     exportHandler,
        //     changHandler,
        //     handlerState,
        //     pageData,
        //     saveHandler,
        //     dataForm,
        //     createColumns,
        //     searchData,
        //     changTime,
        //     table,
        //     pagination,
        //     gridOption,
        //     gridReady,
        //     defaultColDef,
        //     cfsValue,
        //     total,
        //     changePage,
        //     changeSize,
        //     localeTextData,
        //     formRef,
        //     detailItem,
        //     iconText,
        //     delHandler
//         }
//     },
// }
</script>
<script lang="ts">
export default {
    name: "TkDaichuli2",
}
</script>
<style scoped lang="less">
:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

.DivFit {
    width: 100%;
    height: 20px;
    margin-left: 20px;
}

.DivFit div {
    float: left;
    width: 200px;
}

.isTable1 {
    margin: 50px;
    width: 90%;
    // margin: 0 auto;
    border: 1.2px solid #ccc;
    text-align: center;
    border-collapse: collapse;

    td {
        border: 1.2px solid #ccc;
    }

    th {
        border: 1.2px solid #ccc;
    }
}
</style>

